import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';
import { userEvent } from '@storybook/testing-library';

<Meta
  title="Components/Tab/Tab"
  component="bl-tab"
/>

export const TabsTemplate = (args) => html`
    <bl-tab-group>
      <bl-tab name="test-1" slot="tabs" disabled>Disabled</bl-tab>
      <bl-tab name="test-2" slot="tabs" selected >Selected</bl-tab>
      <bl-tab name="test-3" slot="tabs">Tab</bl-tab>
    </bl-tab-group>
  `

export const TabsAttributeTemplate = (args) => html`
    <bl-tab-group>
        <bl-tab name="test-1" slot="tabs" Caption='${ifDefined(args.caption)}' help-text='${ifDefined(args.helpText)}' badge='${ifDefined(args.badge)}' >Tab 1</bl-tab>
        <bl-tab name="test-2" slot="tabs">Tab 2</bl-tab>
        <bl-tab name="test-3" slot="tabs" Caption='${ifDefined(args.caption)}' help-text='${ifDefined(args.helpText)}
        ' badge='${ifDefined(args.badge)}'  disabled >Tab 3</bl-tab>
    </bl-tab-group>
    `
export const NotifyTemplate = (args) => html`
    <bl-tab-group>
         <bl-tab name="test-1" slot="tabs" notify >Tab 1</bl-tab>
         <bl-tab name="test-2" slot="tabs" selected notify >Tab 2</bl-tab>
         <bl-tab name="test-3" slot="tabs" disabled notify >Tab 3</bl-tab>
    </bl-tab-group>
        `
export const IconTemplate = (args) => html`
    <bl-tab-group>
         <bl-tab name="test-1" slot="tabs" icon='${ifDefined(args.icon1)}' >Tab 1</bl-tab>
         <bl-tab name="test-2" slot="tabs" icon='${ifDefined(args.icon2)}' >Tab 2</bl-tab>
         <bl-tab name="test-3" slot="tabs" icon='${ifDefined(args.icon3)}' disabled >Tab 3</bl-tab>
    </bl-tab-group>
        `
export const MoreThanOneSelectedTemplate = (args) => html`
    <bl-tab-group>
         <bl-tab name="test-1" slot="tabs" selected >Selected Tab 1</bl-tab>
         <bl-tab name="test-2" slot="tabs" selected >Selected Tab 2</bl-tab>
         <bl-tab name="test-3" slot="tabs">Tab 3</bl-tab>
    </bl-tab-group>
        `

export const SelectedDisabledTogetherTemplate = (args) => html`
    <bl-tab-group>
         <bl-tab name="test-1" slot="tabs" >Tab 1</bl-tab>
         <bl-tab name="test-2" slot="tabs" selected disabled >Selected and Disabled Tab 2</bl-tab>
         <bl-tab name="test-3" slot="tabs" >Tab 3</bl-tab>
    </bl-tab-group>
        `

export const focusTab = async ({ }) => {
  await userEvent.tab();
  await userEvent.keyboard('{ArrowRight}');
  await userEvent.keyboard(' ');
}

# Tab

<bl-badge icon="check_fill">RTL Supported</bl-badge>

Within tab groups, tabs are used to represent and activate tab panels. A tab can be disabled by setting the disabled prop and can be selected by selected prop.

<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>

<Canvas>
<Story name="Basic Usage">
    {TabsTemplate.bind({})}
  </Story>
</Canvas>


## Tab with Caption
Title can be clarified with caption attribute. Caption is located just below the tab title

<Canvas>
<Story name="Tab With Caption"  args={{ caption: 'Caption' }}>
    {TabsAttributeTemplate.bind({})}
  </Story>
</Canvas>

## Tab With Help Text
You can give extra information to user with help-text attribute. help-text attribute adds a `bl-tooltip` component at right of the tab

<Canvas>
<Story name="Tab With Help Text"  args={{helpText:'helpText' }}>
    {TabsAttributeTemplate.bind({})}
  </Story>
</Canvas>

## Tab With Badge
A Badge can be added to tab. This Badge is showed with `bl-badge` component internally

<Canvas>
<Story name="Tab With Badge"  args={{badge:'New' }}>
    {TabsAttributeTemplate.bind({})}
  </Story>
</Canvas>

## Tab With Icon
An icon can be added to tab. This icon is showed with `bl-icon` component internally and it's color synced with tab's title color

<Canvas>
<Story name="Tab With Icon" args={{icon1:'heart', icon2:'settings', icon3:'book', icon4:'academy', icon5:'account', icon6:'attach', icon7:'award', icon8:'browser' }}>
    {IconTemplate.bind({})}
 </Story>
</Canvas>

## Tab With Notification Dot
A notification dot can be used in tab compnenet in order for user to get notified by updates in related content

<Canvas>
<Story name="Tab With Notification Dot">
    {NotifyTemplate.bind({})}
  </Story>
</Canvas>

## Edge Cases

#### More Than One Selected Tab
If more than one selected tabs are used, the last one is picked as selected

<Canvas>
<Story name="More Than One Selected Tab">
    {MoreThanOneSelectedTemplate.bind({})}
  </Story>
</Canvas>

#### Using Disabled and Selected Props Together
If disabled and selected props are used in same table, disabled prop overrides selected prop

<Canvas>
<Story name="Using Disabled and Selected Props Together">
    {SelectedDisabledTogetherTemplate.bind({})}
  </Story>
</Canvas>

### Keyboard navigation

This component can handle keyboard navigation to switch between available tabs using arrow keys. First `Tab` focuses on the selected tab and user can navigate to other tabs with arrow keys, and `Space` or `Enter` key to select the tab.

<Canvas>
<Story name="Keyboard navigation" play={focusTab}>
    {TabsTemplate.bind({})}
  </Story>
</Canvas>

## RTL Support

The tab component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir` attribute on a parent element or the `html` tag.

<Canvas>
  <Story name="RTL Support">
    {() => html`
      <div style="display: flex; gap: 32px;">
        <div>
          <p style="margin-bottom: 8px;">LTR (Left-to-Right)</p>
          <bl-tab-group>
            <bl-tab name="overview" slot="tabs" selected>Overview</bl-tab>
            <bl-tab name="settings" slot="tabs" icon="settings">Settings</bl-tab>
            <bl-tab name="notifications" slot="tabs" notify>Notifications</bl-tab>
            <bl-tab name="disabled" slot="tabs" disabled>Disabled</bl-tab>
          </bl-tab-group>
        </div>
        <div dir="rtl">
          <p style="margin-bottom: 8px;">RTL (Right-to-Left)</p>
          <bl-tab-group>
            <bl-tab name="overview" slot="tabs" selected>نظرة عامة</bl-tab>
            <bl-tab name="settings" slot="tabs" icon="settings">الإعدادات</bl-tab>
            <bl-tab name="notifications" slot="tabs" notify>الإشعارات</bl-tab>
            <bl-tab name="disabled" slot="tabs" disabled>معطل</bl-tab>
          </bl-tab-group>
        </div>
      </div>
    `}
  </Story>
</Canvas>

Here's a vanilla JavaScript and HTML example of how to use RTL support:

```html
<!-- index.html -->
<html>
<head>
  <meta charset="UTF-8">
  <title>Baklava Tab RTL Example</title>
  <!-- Import Baklava's CSS and JavaScript -->
  <script type="module" src="path/to/baklava.js"></script>
  <style>
    .container {
      margin: 20px;
    }
    .flex-container {
      display: flex;
      gap: 32px;
      margin-top: 20px;
    }
    .tab-group {
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <button onclick="toggleDirection()">Toggle RTL/LTR</button>

    <div class="flex-container">
      <!-- LTR Example -->
      <div class="tab-group">
        <h3>LTR Tabs</h3>
        <bl-tab-group>
          <bl-tab name="overview" slot="tabs" selected>Overview</bl-tab>
          <bl-tab name="settings" slot="tabs" icon="settings">Settings</bl-tab>
          <bl-tab name="notifications" slot="tabs" notify>Notifications</bl-tab>
          <bl-tab name="disabled" slot="tabs" disabled>Disabled</bl-tab>
        </bl-tab-group>
      </div>

      <!-- RTL Example -->
      <div class="tab-group" dir="rtl">
        <h3>RTL Tabs</h3>
        <bl-tab-group>
          <bl-tab name="overview" slot="tabs" selected>نظرة عامة</bl-tab>
          <bl-tab name="settings" slot="tabs" icon="settings">الإعدادات</bl-tab>
          <bl-tab name="notifications" slot="tabs" notify>الإشعارات</bl-tab>
          <bl-tab name="disabled" slot="tabs" disabled>معطل</bl-tab>
        </bl-tab-group>
      </div>
    </div>
  </div>

  <script>
    // Example of dynamically changing direction
    const toggleDirection = () => {
      const rtlContainer = document.querySelector('[dir="rtl"]');
      rtlContainer.dir = rtlContainer.dir === 'rtl' ? 'ltr' : 'rtl';
    };

    // Example of creating tabs programmatically
    const createTabs = (isRTL) => {
      const container = document.createElement('div');
      if (isRTL) container.dir = 'rtl';

      const tabGroup = document.createElement('bl-tab-group');

      const tab1 = document.createElement('bl-tab');
      tab1.name = 'overview';
      tab1.slot = 'tabs';
      tab1.selected = true;
      tab1.textContent = isRTL ? 'نظرة عامة' : 'Overview';

      const tab2 = document.createElement('bl-tab');
      tab2.name = 'settings';
      tab2.slot = 'tabs';
      tab2.icon = 'settings';
      tab2.textContent = isRTL ? 'الإعدادات' : 'Settings';

      tabGroup.appendChild(tab1);
      tabGroup.appendChild(tab2);
      container.appendChild(tabGroup);
      document.body.appendChild(container);
    };
  </script>
</body>
</html>
```

## Reference

<ArgsTable of="bl-tab" />


